<template>
  <div>
    <div class="tree-box">
        <el-tree
            ref="treeRef"
            :data="data.list"
            show-checkbox
            node-key="roleId"
            :check-strictly="true"
            :default-checked-keys="data.authority"
            :props="{
              children: 'roleList',
              label: 'name',
            }"
        />
    </div>
      <el-row class="mb-4">
        <el-button 
        type="primary" 
        plain
        @click="changeAuthority"
        >确实修改</el-button>
      </el-row>
  </div>
</template>

<script setup lang='ts'>
import { useRoute } from "vue-router";
import { authorityList } from "../../../type/authorityView";
import { getAuthorityList } from  '../../../request/api';
import {  reactive, onMounted, ref } from "vue";

/** 获取路由传过来的参数 */
const route = useRoute().params;
/** 把字符串转换成数字类型 */
let id = Number(route.id);
/** 因为ts类型检查的缘故，类型断言似乎不起作用，所以采用这个方法进行类型检查和将 string[] 转换成 number[] */
let authorities: string[];
if(Array.isArray(route.authority)) {
  authorities = route.authority;
} else {
  authorities = [route.authority];
}
let newAuthority = authorities.map((v) => Number(v));
const data = reactive(new authorityList(id, newAuthority));
console.log(data, 'data');
/** 挂载后调用函数 */
onMounted(() => {
    getAuthorityList().then(res => {
        data.list = res.data;
        console.log(data.list, 'data.list')
    })
});
/** ref  */
const treeRef = ref(data.treeRef);
/** 点击 修改 事件 */
const changeAuthority = () => {
  console.log(treeRef.value.getCheckedKeys().sort((a: number, b:number) => a - b));
  /** 传到后台进行修改，但是没有接口 */
}
</script>

<style lang="less" scoped>
.mb-4 {
  margin-top: 10px;;
}
</style>